import useGlobalAPI from '@/hooks/useGlobalAPI'
import {defaultRoutes} from '@/router'
import { defineComponent, onMounted } from 'vue'

const page_404 = defineComponent({
  name: '404',
  setup() {
    const {router, route} = useGlobalAPI()

    const goBack = () => {
      if (defaultRoutes.length === router.getRoutes().length) {
        location.reload()
      } else {
        router.push({path: '/'})
      }
    }

    onMounted(() => {
      if (route.query && route.query.reload && route.query.reload === '1') {
        if (defaultRoutes.length < router.getRoutes().length) {
          router.push({path: '/'})
        }
      }
    })
    return () => (
      <div class='page_404 w-screen h-screen flex justify-center items-center'>
        <a-result status='404' title='404' sub-title='对不起，您访问的页面未找到'>
          <div class='flex items-center justify-center'>
            <a-button class='mx-auto bg-primary text-white' type='primary' onClick={goBack}>
              返回到首页
            </a-button>
          </div>
        </a-result>
      </div>
    )
  }
})
export default page_404
